<template>
<div class="app-container">
    <div class="resource-allocate-box">
        <table class="z-table" style="width: 100%">
            <thead>
                <tr>
                    <th>资源组</th>
                    <th>资源</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(group,groupIndex) in resourceGroupList" class="group-tr">
                    <td class="group-td">
                        <span class="group-item"><el-checkbox :checked="group.checked" @change="groupSelectAllChange(group)">{{group.name}}</el-checkbox></span>
                    </td>
                    <td class="resource-td">
                        <el-checkbox-group v-model="resourceIdList" @change="">
                            <el-checkbox v-for="(resource,resourceIndex) in group.resourceList" :label="resource.id" :key="resource.id">{{resource.name}}</el-checkbox>
                        </el-checkbox-group>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="btn-box">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="$router.back(-1)">返回</el-button>
    </div>
</div>
</template>

<script>
    import '@/styles/form-box.css'
    import roleApi from '../../api/role'
    import resourceApi from '../../api/resource'
    import resourceGroupApi from '../../api/resourceGroup'
    import {Message} from 'element-ui'

    export default {
        name: "role-manager-allocate",
        props:['roleId'],
        data:function () {
            return {
                //角色拥有的资源
                resourceIdList:[],
                resourceGroupList:[],
            }
        },
        computed:{

        },
        mounted:function () {
            const _this = this;
            //获取该角色的所拥有的资源id list
            _this.resourceIdList = resourceApi.findByRoleId(_this.roleId)
                .then(function (data) {
                    _this.resourceIdList = data
                    resourceGroupApi.findAllCarryResource()
                        .then(function (data) {
                            _this.resourceGroupList = data
                            _this.resourceGroupList.forEach(function (group) {
                                group.checked = false;
                            })
                        })
                })

        },
        watch:{
            resourceChecked(resource){
                return this.resourceIdList.indexOf(resource.id) >= 0
            },
        },
        methods:{

            groupSelectAllChange:function (group) {
                const _this = this;
                var selected = !group.checked
                group.checked = selected

                group.resourceList.forEach(function (resource) {
                    if (selected){
                        //全選
                        _this.addResource(resource)
                    }else{
                        //全不選
                        _this.removeResource(resource)
                    }

                })
            },
            addResource:function (resource) {
                var index = this.resourceIdList.indexOf(resource.id);
                if (index < 0){
                    this.resourceIdList.push(resource.id)
                }
            },
            removeResource:function (resource) {
                var index = this.resourceIdList.indexOf(resource.id);
                if (index >= 0){
                    this.resourceIdList.splice(index,1)
                }
            },
            save:function () {
                const _this = this
                var request = {
                    roleId:_this.roleId,
                    resourceIdList:_this.resourceIdList
                }
                roleApi.allocateResource(_this.roleId,_this.resourceIdList)
                    .then(function (data) {
                        if (data.success){
                            Message.success('配置资源成功')
                            return
                        }
                        Message.error('配置资源失败')
                    }).catch(function () {
                        Message.error('配置资源失败')
                    })

            }
        }
    }
</script>

<style scoped>
.resource-td .resource-item{
    margin-right: 15px;
}
.btn-box{
    margin-left: 20px;
    margin-top: 15px;
}
</style>
